<template>
  <ContentWrap :style="`height: ${contentHeight}px;`">
    <div class="btn routeHeader">
      <el-button
        type="primary"
        @click="handleForm"
        :loading="btnLoading"
        v-if="formType === 'update' && [10, 20, 50, 60].includes(formData.dictRequisitionFormStatus)"
        v-hasPermi="['order:requirement-manage-buy-form:save']"
      >
        保存
      </el-button>
      <el-button
        plain
        @click="goBack"
      >
        关闭
      </el-button>
    </div>
    <el-scrollbar :max-height="`${contentHeight - 73}px`">
      <el-form
        ref="formRef"
        :model="formData"
        :inline="true"
        label-width="100px"
        v-loading="formLoading"
      >
        <el-form-item label="产品编号" prop="productNumber">
          <el-input v-model="formData.productNumber" disabled placeholder="请输入产品编号" />
        </el-form-item>
        <el-form-item label="产品名称" prop="productName">
          <el-input v-model="formData.productName" disabled placeholder="请输入产品名称" />
        </el-form-item>
        <el-form-item label="图纸图号" prop="drawingNumber">
          <el-input v-model="formData.drawingNumber" disabled placeholder="请输入图纸图号" />
        </el-form-item>
        <el-form-item label="产品规格" prop="productStandard">
          <el-input v-model="formData.productStandard" disabled placeholder="请输入产品规格" />
        </el-form-item>
        <el-form-item label="申购单号" prop="requisitionForm">
          <el-input v-model="formData.requisitionForm" disabled placeholder="请输入申购单号" />
        </el-form-item>
      </el-form>
      <!-- 表单 -->
      <el-table border :data="list" v-loading="formLoading" row-key="id" default-expand-all>
        <el-table-column label="序号" align="center" type="" prop="parentIndex" />
        <el-table-column label="编号" align="center" prop="code" min-width="200px" />
        <el-table-column label="部件编号" align="center" prop="partNumber" min-width="200px" />
        <el-table-column label="部件名称" align="center" prop="partName" min-width="200px" />
        <el-table-column label="图纸图号" align="center" prop="drawingNumber" min-width="200px" />
        <el-table-column label="部件规格" align="center" prop="partSpecification" min-width="200px" />
        <el-table-column label="材质" align="center" prop="material" min-width="200px" />
        <el-table-column label="规格" align="center" prop="specification" min-width="200px" />
        <el-table-column label="净尺寸(长)" align="center" prop="netSizeLength" min-width="200px" />
        <el-table-column label="净尺寸(宽)" align="center" prop="netSizeWidth" min-width="200px" />
        <el-table-column label="下料尺寸(长)" align="center" prop="cuttingSizeLength" min-width="200px" />
        <el-table-column label="下料尺寸(宽)" align="center" prop="cuttingSizeWidth" min-width="200px" />
        <el-table-column label="计划数量" align="center" prop="planQuantity" min-width="200px" />
        <el-table-column label="工序名称" align="center" prop="dictProcessName" min-width="200px" />
        <el-table-column label="下料类型" align="center" prop="dictBaitingType" min-width="200px" >
          <template #default="scope">
            <dict-tag type="dict_baiting_type" :value="scope.row.dictBaitingType" />
          </template>
        </el-table-column>
        <el-table-column label="是否机加" align="center" prop="dictIsMachining" min-width="200px" >
          <template #default="scope">
            <dict-tag type="dict_is_machining" :value="scope.row.dictIsMachining" />
          </template>
        </el-table-column>
        <el-table-column label="机加工序" align="center" prop="dictMachiningProcess" min-width="200px" >
          <template #default="scope">
            <dict-tag type="dict_Machining_process" :value="scope.row.dictMachiningProcess" />
          </template>
        </el-table-column>
        <el-table-column label="需求交期" align="center" prop="requirementTime" min-width="250px" >
          <template #default="scope">
            <el-date-picker
              :disabled="formType === 'view'"
              v-if="scope.row.isParent"
              v-model="scope.row.requirementTime"
              value-format="YYYY-MM-DD HH:mm:ss"
              type="date"
              placeholder="选择日期"
            />
          </template>
        </el-table-column>
        <el-table-column label="状态" align="center" prop="dictRequisitionFormDetailStatus" min-width="200px" >
          <template #default="scope">
            <dict-tag v-if="scope.row.isParent" type="dict_requisition_form_detail_status"  :value="scope.row.dictRequisitionFormDetailStatus" />
            <div v-else></div>
          </template>
        </el-table-column>
      </el-table>
    </el-scrollbar>
  </ContentWrap>
</template>
<script setup lang="ts">
import * as RequirementManageBuyFormApi from '@/api/orderManagement/requirementManageBuyForm'
import { useTagsViewStore } from '@/store/modules/tagsView'

const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗

const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formType = ref('') // 表单的类型：create - 新增；update - 修改
const formData = ref({
  id: undefined,
  productNumber: undefined,
  productName: undefined,
  drawingNumber: undefined,
  productStandard: undefined,
  requisitionForm: undefined,
  dictRequisitionFormStatus: undefined,
  details: []
})
const btnLoading = ref(false)
const list = ref([])
const formRef = ref()
const contentHeight = ref(0)

/** 获取数据 */
const { query } = useRoute() // 路由的查询
const getData = async () => {
  dialogTitle.value = t('action.' + (query as any).type)
  formType.value = (query as any).type
  formLoading.value = true
  const res = await RequirementManageBuyFormApi.getRequirementManageBuyForm((query as any).id)
  formData.value = res
  list.value = res.details.map((item, index) => {
    item.parentIndex = index + 1
    item.isParent = true
    return item
  })
  formLoading.value = false
}

/**返回 */
const tagsViewStore = useTagsViewStore()
const route = useRouter() // 路由
const goBack = async () => {
  //获取当前路由并删除tagView
  tagsViewStore.delView(route.currentRoute.value)
  //跳转列表页
  route.push({
    path: '/orderManagement/orderManagement/requirementManagement/requirementManageBuyForm'
  })
}

// 保存
const handleForm = async () => {
  for (let i = 0; i < formData.value.details.length; i++) {
    if (!formData.value.details[i]['requirementTime']) {
      message.notifyError('需求交期不能为空')
      return
    }
  }
  btnLoading.value = true
  try {
    const data = formData.value as unknown as RequirementManageBuyFormApi.RequirementManageBuyFormVO
    await RequirementManageBuyFormApi.updateRequirementManageBuyForm(data)
    message.success('保存成功')
    goBack()
  } finally {
    btnLoading.value = false
  }
}

onMounted(() => {
  contentHeight.value = document.body.clientHeight - 125
  getData()
})

</script>
<style lang="scss" scoped>
.btn {
  margin-bottom: 10px;
}
</style>
